import React, { Component } from 'react';
import { Row, Col, Input, Select, DatePicker } from 'antd';
import ReactQuill from 'react-quill';
import './EditForm.less'
import 'react-quill/dist/quill.snow.css';

const Option = Select.Option;
const { TextArea } = Input;

const modules = {
  toolbar: [
    [{ 'header': [1, 2, false] }],
    ['bold', 'italic', 'underline','strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image', 'video'],
    ['clean']
  ],
}

class EditForm extends Component {

  render() {

    return (
      <div>
        <div className="form-details">
          <div className="details-msg-form">
            <Row>
              <Col span={24}>
                <div className="flex-item">
                  <label className="key-title">Title:</label>
                  <Input
                    className="msg-item"
                    value={this.props.title}
                    onChange={this.props.titleOnChange} />
                </div>
              </Col>
            </Row>
            <Row className="mt10">
              <Col span={8}>
                <div className="flex-item mr20">
                  <label className="key-title">Press:</label>
                  <Input className="msg-item" />
                </div>
              </Col>
              <Col span={8}>
                <div className="flex-item mr20">
                  <label className="key-title">Author:</label>
                  <Input
                    className="msg-item"
                    value={this.props.author}
                    onChange={this.props.authorOnChange} />
                </div>
              </Col>
              <Col span={8}>
                <div className="flex-item">
                  <label className="key-title">Time:</label>
                  <DatePicker
                    showTime
                    className="msg-item"
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="Select Time"
                    value={this.props.time}
                    onOk={this.props.timeOnChange}
                  />
                </div>
              </Col>
            </Row>
            <Row className="mt10">
              <Col span={12}>
                <div className="flex-item mr20">
                  <label className="key-title">Key Word:</label>
                  <Input
                    className="msg-item"
                    value={this.props.keyWord}
                    onChange={this.props.keyWordOnChange} />
                </div>
              </Col>
              <Col span={12}>
                <div className="flex-item">
                  <label className="key-title">Category:</label>
                  <Select
                    value={this.props.category}
                    className="msg-item"
                    onChange={this.props.categoryOnChange}>
                    {
                      this.props.categoryList && this.props.categoryList.length !== 0 ?
                      this.props.categoryList.map((item, index) => {
                        return (
                          <Option value={item.id} key={index}>{item.name}</Option>
                        )
                      })
                      :
                      null
                    }
                  </Select>
                </div>
              </Col>
            </Row>
            <Row className="mt10">
              <Col span={24}>
                <div className="flex-item">
                  <label className="key-title">Summarize:</label>
                  <TextArea
                    className="msg-item"
                    autosize={{ minRows: 2, maxRows: 6 }}
                    value={this.props.summarize}
                    onChange={this.props.summarizeOnChange} />
                </div>
              </Col>
            </Row>
          </div>
        </div>
        <div className="details-rich-text mt10">
          <ReactQuill
            modules={modules}
            value={this.props.richTextValue}
            onChange={this.props.richTextOnChange} />
        </div>
      </div>
    )
  }
}

export default EditForm;
